<template>
  <div ref="headerBox">
    <!-- 导航栏开始 -->
    <div class="banner" id="#top" 
    :class="{ 
      ifBanner: $route.name == 'Home',
      ifSearch:$route.name == 'Search'|| $route.name == 'Video'}">
      <div class="nav">
        <!-- 导航栏左侧开始 -->
        <ul class="navLeft" :class="{ changeColor: $route.name !== 'Home' }">
          <li>
            <i class="el-icon-video-camera-solid"> </i>
            <router-link
              to="/"
              :style="{ color: $route.name == 'Home' ? 'white' : '#000' }"
              >主站</router-link
            >
          </li>
          <li @click="myAlert('jump')">番剧</li>
          <li @click="myAlert('jump')">游戏中心</li>
          <li @click="myAlert('jump')">直播</li>
          <li @click="myAlert('该功能正火速研发中(*^▽^*)')">会员购</li>
          <li @click="myAlert('jump')">漫画</li>
          <li @click="myAlert('jump')">赛事</li>
          <li
            @mouseover="showqr = 'block'"
            @mouseleave="showqr = 'none'"
            class="showAppQR"
          >
            <i class="el-icon-mobile-phone"> </i>下载APP
            <div
              class="qrPicArea animate__animated animate__fadeInDown"
              :style="{ display: showqr }"
            >
              <div class="triBox">
                <div class="triangle"></div>
              </div>
              <div class="qrPic">
                <img v-lazy="'/img/qrApp.jpg'" />
                <div class="text">扫码下载APP</div>
              </div>
            </div>
          </li>
        </ul>
        <!-- 导航栏左侧结束 -->
        <!-- 导航栏搜索开始 -->
        <div class="search">
          <input
            type="text"
            class="searchInp"
            v-model="singleSearch"
            @focus="
              showBox.inp_his = 1;
              showLoginText = false;
            "
            @input="showBox.inp_his = 0"
            @keyup.13="subSearch"
            :class="{ changeInp: $route.name !== 'Home' }"
          />
          <div class="serachBtn" @click="subSearch">
            <i class="el-icon-search"></i>
          </div>
          <!-- 搜索记录开始 -->
          <div
            class="inp_his"
            v-show="showHis"
            @mouseenter="showBox.inp_his = 1"
            @mouseleave="showBox.inp_his = 0"
            :class="{ changeInp: $route.name !== 'Home' }"
          >
            <div class="search_tit">
              <p class="tit_l">搜索历史</p>
              <p class="tit_r" @click="del_all">清空</p>
            </div>
            <div class="his_wrap">
              <div class="his_box" v-for="(item, index) in hisArr" :key="index" @click="clickHisDoSearch(item)">
                <p class="his_single" style="" :title="item">
                  {{ item }}
                </p>
                <i
                  class="el-icon-circle-close del_his"
                  @click.stop="del_his(index)"
                ></i>
              </div>
            </div>
            <div class="show_more"></div>
            <div class="search_hot">
              <p class="tit_l">热搜</p>
              <div class="hot_wrap">
                <div class="hot_box">
                  <div class="h_b_txt" v-for="i in 5" :title="hotSearch[i-1]" :key="i" @click="clickHisDoSearch(hotSearch[i-1])">
                    <span class="num n_hot">{{i}}</span>
                    <p class="title fontChange">{{hotSearch[i-1]}}</p>
                  </div>
                </div>
                <div class="hot_box">
                  <div class="h_b_txt" v-for="i in 5" :title="hotSearch[i+5-1]" :key="i" @click="clickHisDoSearch(hotSearch[i+5-1])">
                    <span class="num">{{i+5}}</span>
                    <p class="title fontChange">{{hotSearch[i+5-1]}}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 搜索记录结束 -->
        </div>
        <!-- 导航栏搜索结束 -->

        <!-- 导航栏右侧开始 -->
        <ul
          class="navRight"
          :class="{ changeRightColor: $route.name !== 'Home' }"
        >
          <div class="headBox" style="position: relative" v-if="isLogin">
            <img class="myhead" v-lazy="'/img/head.webp'" alt="" />
            <div class="hiddenText animate__animated animate__fadeInDown animate__faster">
              <!-- <img v-lazy="'/img/head.webp'" alt="" class="myhead" /> -->
              <p style="text-align: center;font-weight:bold;font-size:16px">{{ uid }}</p>
              <div style="display: flex; justify-content: space-between">
                <div style="margin: 0 20px 0 20px">等级 4</div>
                <div style="margin: 0 10px 0 10px; color: #999">
                  {{ expVal.cur }}/{{ expVal.curFull }}
                </div>
              </div>
              <el-progress
                :percentage="proPercentage"
                class="elProg"
              ></el-progress>
              <div class="accountInfo" style="">
                <div class="fontChange">
                  <img src="/img/coin.png" alt="" class="info_img" />
                  267.0
                </div>
                <div  class="fontChange">
                  <img
                    src="/img/b_coin.png"
                    alt=""
                    class="info_img fontChange"
                  />
                  0
                </div>
                <div>
                  <img
                    src="/img/email.png"
                    alt=""
                    class="info_img"
                    style="display: inline-block; margin-right: 20px"
                  />

                  <img src="/img/phone.png" alt="" class="info_img" />
                </div>
              </div>
              <div class="userRel">
                <div class="relBox">
                  <div class="info_tit">关注</div>
                  <div class="fontChange">26</div>
                </div>
                <div class="relBox">
                  <div class="info_tit">粉丝</div>
                  <div class="fontChange">--</div>
                </div>
                <div class="relBox">
                  <div class="info_tit">动态</div>
                  <div class="fontChange">1</div>
                </div>
              </div>
              <div class="userOpt">
                <div class="optGroup">
                  <img src="/img/person.png" alt="" class="optIcon" />
                  <p>个人中心</p>
                </div>

                <div class="optGroup">
                  <img src="/img/tougao.png" alt="" class="optIcon" />投稿管理
                  <p></p>
                </div>

                <div class="optGroup">
                  <img src="/img/wallet.png" alt="" class="optIcon" />B币钱包
                  <p></p>
                </div>

                <div class="optGroup">
                  <img src="/img/order.png" alt="" class="optIcon" />
                  <p>订单中心</p>
                </div>

                <div class="optGroup">
                  <img src="/img/streaming.png" alt="" class="optIcon" />
                  <p>直播中心</p>
                </div>

                <div class="optGroup" style="border-bottom: 1px solid #f4f4f4">
                  <img src="/img/courses.png" alt="" class="optIcon" />
                  <p>我的课程</p>
                </div>
                <div class="optGroup" @click="logout">
                  <img src="/img/exit.png" alt="" class="optIcon" />
                  <p>退出登录</p>
                </div>
              </div>
            </div>
          </div>
          <div
            class="headBox"
            v-show="$route.name == 'Home'"
            style="position: relative"
            v-else
          >
            <div
              class="myTextHead"
              :class="{ changeTextBgcc: $route.name !== 'Home' }"
              @mouseover="showLoginText = true"
            >
              <router-link to="/login" style="color: #1890ff">登录</router-link>
            </div>
            <div class="hiddenBox" style="" v-show="showLoginText">
              <el-button
                type="danger"
                icon="el-icon-close"
                circle
                style=""
                @click="showLoginText = false"
              ></el-button>
              <div class="triangle" style=""></div>
              <div class="loginTips" style="">
                <p
                  style="
                    color: black;
                    margin-bottom: 26px;
                    font-size: 16px;
                    font-weight: bold;
                  "
                >
                  登陆之后你可以看:
                </p>
                <div
                  style="
                    display: flex;
                    width: 100%;
                    flex-wrap: wrap;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 20px;
                  "
                >
                  <div class="imgGroup" style="">
                    <img
                      src="/img/loghd.png"
                      alt=""
                      style="
                        width: 26px;
                        margin-bottom: 10px;
                        line-height: 26px;
                      "
                    />
                    免费看高清视频
                  </div>
                  <div class="def_black">
                    <img
                      src="/img/logclock.png"
                      alt=""
                      style="width: 26px; line-height: 26px"
                    />多端同步视频进度
                  </div>
                  <div class="def_black">
                    <img
                      src="/img/logcom.png"
                      alt=""
                      style="
                        width: 26px;
                        margin-bottom: 10px;
                        line-height: 26px;
                      "
                    />
                    发表视频评论
                  </div>
                  <div class="def_black">
                    <img
                      src="/img/logplay.png"
                      alt=""
                      style="width: 26px; line-height: 26px"
                    />
                    热门影视看不停
                  </div>
                </div>
                <el-button
                  type="primary"
                  size="large"
                  class="logBtn"
                  @click="$router.push('/login')"
                  ><router-link to="/login" style="color: white"
                    >登录</router-link
                  ></el-button
                >
                <div style="" class="useTips">
                  <p style="margin-right: 40px">首次使用?</p>
                  <div>
                    <router-link to="/register" style="color: #00a1d6">
                      点我注册</router-link
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
          <li @click="myAlert('该功能正火速研发中(*^▽^*)')">大会员</li>
          <li @click="myAlert('该功能正火速研发中(*^▽^*)')">消息</li>
          <li @click="myAlert('该功能正火速研发中(*^▽^*)')">动态</li>
          <li @click="myAlert('该功能正火速研发中(*^▽^*)')">收藏</li>
          <li @click="myAlert('该功能正火速研发中(*^▽^*)')">历史</li>
          <li @click="myAlert('该功能正火速研发中(*^▽^*)')">创作中心</li>
          <li @click="myAlert('该功能正火速研发中(*^▽^*)')"><button class="navTouGao">投稿</button></li>
        </ul>
      </div>
    </div>
    <!-- 导航栏结束 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      showBox: {
        inp_his: 0,
      },
      isLogin: false,
      singleSearch: "",
      hotSearch:['世界最高音','吴强','三天三夜','中国梦之声','采访','“三天三夜”《中国梦之声》','中国','三天','高音','梦之声'],
      hisArr: [],
      showqr: "none",
      expVal: {
        cur: 5235,
        curFull: 10800,
      },
      showHead: true,
      showLoginText: true,
      uid: null,
    };
  },
  computed: {
    showHis() {
      return this.showBox.inp_his;
    },
    proPercentage() {
      return Number(((this.expVal.cur / this.expVal.curFull) * 100).toFixed(2));
    },
  },
  props:['keyword'],
  methods: {
    myAlert(message){
      if(message=='jump'){
        this.$router.push('/')
        return;
      }
      this.$msg({message,type:"info"})
    },
    logout() {
      localStorage.removeItem("uid");
      sessionStorage.removeItem("uid");
      this.uid = null;
      this.isLogin = null;
      this.$notify({
        title:'提示',
        message:'当前已退出登录',
        type:'success'
      })
    },
    clickHisDoSearch(kw) {
      this.showBox.inp_his = 0
      this.singleSearch = kw;
      this.subSearch();
    },
    subSearch() {
      if (this.singleSearch.trim() == "") {
        this.$msg({
          type: "error",
          message: "请输入内容再搜索",
          duration: 1000,
        });
        return;
      }
      this.hisArr.forEach((item, index) => {
        if (item == this.singleSearch) {
          this.hisArr.splice(index, 1);
        }
      });
      this.hisArr.unshift(this.singleSearch);
      localStorage.setItem("searchHistory", JSON.stringify(this.hisArr));
      this.$router.push(`/search/${this.singleSearch}`)
    },
    del_his(index) {
      this.hisArr.splice(index, 1);
      localStorage.setItem("searchHistory", JSON.stringify(this.hisArr));
      return;
    },
    del_all() {
      this.$msgbox
        .confirm("确认清空历史记录吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: false,
        })
        .then(() => {
          this.hisArr = [];
          this.$msg({
            type: "success",
            message: "删除成功!",
            duration: 1000,
          });
        })
        .catch(() => {
          this.$msg({
            type: "info",
            message: "已取消删除",
            duration: 1000,
          });
        });
    },
    initData() {
      this.hisArr = JSON.parse(localStorage.getItem("searchHistory")) || [];
      this.uid = localStorage.getItem("uid") || sessionStorage.getItem("uid");
      this.isLogin = this.uid ? true : false;
      this.singleSearch=this.keyword||''
    },
  },
  watch: {
    singleSearch(nVal, oVal) {
      if (nVal.trim() == "") {
        this.showBox.inp_his = 1;
      }
    },
  },
  mounted() {
    this.initData();
  },
};
</script>

<style>
.el-message-box{
  position: absolute;
    left: 20%;
    top: 20%;
    transform: translate(50%,50%);
}
.logBtn {
  display: block !important;
  width: 100% !important;
  font-size: 14px;
  line-height: 40px;
  padding: 0px;
}
.el-progress-bar {
  box-sizing: content-box !important;
  width: 96% !important;
  margin: 0 auto !important;
  margin-left: 4px !important;
}
.el-progress__text {
  display: none !important;
}
.el-button--danger {
  position: absolute;
  top: 10px;
  right: -12px;
}
.el-button.is-circle {
  padding: 5px !important;
}
.btn2{
  top:-10px;
}
</style>
<style lang="scss" scoped>
.hiddenBox {
  width: 360px;
  margin-top: -8px;
  position: absolute;
  left: -161px;
  z-index: 999;
  .loginTips {
    background-color: white;
    height: 234px;
    padding: 18px;
    box-shadow: 8px 6px 12px -1px rgb(0 0 0 / 29%);
    border-radius: 6px;
  }
  .triangle {
    width: 0;
    height: 0;
    margin: 0 auto;
    border: 10px solid transparent;
    border-bottom-color: white;
  }
}
.boxFixed{
  position: fixed;
  bottom: 60px;
  right: 100px;
}
.useTips {
  color: #000;
  display: flex;
  justify-content: center;
  margin-top: 20px;
  font-weight: 600;
}
.imgGroup,
.def_black {
  color: black !important;
  width: 50%;
}
.showAppQR {
  position: relative;
  .qrPicArea {
    z-index: 100;
    position: absolute;
    top: 18px;
    .triBox {
      width: 70px;
      .triangle {
        width: 0;
        height: 0;
        margin: 0 auto;
        border: 10px solid transparent;
        border-bottom-color: #3ea04b;
      }
    }
    .qrPic {
      position: absolute;
      width: 110px;
      height: 90px;
      left: -20px;
      img {
        display: block;
        width: 100%;
      }
      .text {
        color: white;
        text-align: center;
        background-color: #3ea04b;
      }
    }
  }
}
.hiddenText {
  position: absolute;
  display: none;
  background-color: #fff;
  color: black !important;
  top: 40px;
  z-index: 98;
  left: -125px;
  width: 300px;
  border-radius: 6px;
  box-shadow: 0px -6px 16px -8px rgba(0, 0, 0, 0.3);
  padding: 4px;
  padding-top: 50px;
  .myhead {
    display: block;
    margin: 0 auto;
    width: 90px !important;
    height: 90px !important;
    border-radius: 50%;
    margin-top: -55px;
  }
}
.elProg {
  margin: 0 auto;
  text-align: center;
}
.accountInfo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 20px;
  margin: 20px;
  .info_img {
    width: 20px;
    height: 20px;
    // vertical-align: middle;
  }
}
.changeInp {
  background-color: #f4f4f4;
}
.changeTextBgcc {
  background-color: #999;
}
.userRel {
  line-height: 20px;
  padding: 10px;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #f4f4f4;
  border-bottom: 1px solid #f4f4f4;
  .relBox {
    width: 30%;
    text-align: center;
    .info_tit {
      color: #999;
    }
  }
  .optIcon {
    margin-right: 10px;
  }
}
.userOpt {
  line-height: 20px;
  padding-top: 6px;
  .optGroup {
    display: flex;
    padding: 14px;
    &:hover {
      background-color: #f4f4f4;
    }
  }
  img {
    display: block;
    width: 20px;
    height: 20px;
    margin-right: 8px;
  }
}
.ifBanner {
  background: url("/img/bg.png") no-repeat;
  background-size: cover;
}
.ifNotBanner {
  background: url("/img/bg2.jpg") no-repeat;
  background-size: cover;
}
.fixBanner{
  position: fixed;
  top: 0;
}
.banner {
  height: 155px;
  .nav {
    display: flex;
    justify-content: space-around;
    height: 56px;
    padding: 10px 24px;
    min-width: 1300px;
  }
  li {
    cursor: pointer;
  }
  .changeColor {
    color: black !important;
  }
  .changeRightColor {
    li {
      color: black !important;
    }
  }
  .navLeft,
  .navRight {
    width: 430px;
    color: white;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    height: 32px;
    line-height: 32px;
    padding: 2px;
  }
  .search {
    position: relative;
    width: 500px;
    margin: 0 10px 0;
    margin-top: 0;
  }
  .searchInp {
    display: block;
    border-radius: 2px;
    height: 34px;
    width: 484px;
    padding-left: 16px;
  }
  .inp_his {
    background-color: white;
    position: relative;
    box-sizing: border-box;
    width: 502px;
    top: 2px;
    left: 0;
    z-index: 97;
    padding: 16px;
    border: 2px solid #cbcaca9a;
    border-radius: 6px;
    .tit_l {
      font-size: 16px;
      font-weight: 600;
    }
    .search_tit {
      height: 24px;
      line-height: 24px;
      display: flex;
      justify-content: space-between;
      .tit_r {
        font-size: 12px;
        color: #999;
        cursor: pointer;
      }
    }
    .his_wrap {
      margin-top: 10px;
      display: flex;
      width: 100%;
      justify-content: flex-start;
      align-items: center;
      box-sizing: border-box;
      flex-direction: row;
      flex-wrap: wrap;
      // background-color: brown;
      padding: 20px;
      .his_box {
        cursor: pointer;
        position: relative;
        max-width: 96px;
        background-color: #f4f4f4c9;
        padding: 7px 10px 8px;
        margin: 0 10px 10px 0;
        height: 20px;
        line-height: 20px;
        font-size: 12px;
        &:hover > .del_his {
          visibility: visible;
        }
        &:hover > :not(.del_his) {
          color: #1890ff;
        }
        p {
          overflow: hidden;
        }
        .del_his {
          position: absolute;
          visibility: hidden;
          display: block;
          top: -7px;
          right: -4px;
          font-size: 20px;
          &:hover {
            color: #fb7299;
          }
        }
      }
      .his_single {
        max-width: 100px;
        overflow: hidden;
        text-overflow: eliphsis;
        white-space: nowrap;
      }
    }
    .show_more {
      margin-bottom: 14px;
    }
  }
  .serachBtn {
    position: absolute;
    text-align: center;
    font-weight: 800;
    right: -2px;
    top: 0;
    background-color: #e7e7e7;
    width: 48px;
    height: 36px;
    font-size: 22px;
    line-height: 36px;
  }
  .hot_wrap {
    display: flex;
    box-sizing: border-box;
    justify-content: space-between;
    width: 470px;
    height: 200px;
    .hot_box {
      box-sizing: border-box;
      padding-left: 20px;
      margin-top: 10px;
      width: 225px;
      .num {
        font-size: 14px;
        color: rgba(153, 153, 153, 0.748);
      }
      .n_hot {
        color: #212121;
      }
      .h_b_txt {
        height: 38px;
        min-width: 206px;
        display: flex;
        justify-content: flex-start;
        &:hover {
          background-color: #f4f4f4bb;
        }
        .num {
          display: block;
          line-height: 38px;
          margin-right: 7px;
        }
      }
      .title {
        font-size: 14px;
        line-height: 38px;
        margin-right: 6px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        letter-spacing: 0;
      }
    }
  }
  .navRight {
    cursor: default;
    width: 430px;
    .myhead,
    .myTextHead {
      display: block;
      border-radius: 50%;
      width: 36px;
      height: 36px;
      line-height: 36px;
      color: #1890ff;
      text-align: center;
      font-weight: bold;
      background-color: white;
    }
  }
  .headBox:hover > .hiddenText {
    display: block;
  }
  .headBox:hover > .myhead {
    position: absolute;
    z-index: 101;
    top: 10px;
    left: -10px;
    margin-top: -10px;
    width: 90px;
    height: 90px;
  }
  .navTouGao {
    color: white;
    height: 36px;
    border-radius: 2px;
    line-height: 36px;
    width: 100px;
    background-color: #fb7299;
  }
}
.ifSearch{
  height:60px
}
</style>
